<template>
  <div class="history-record">
    <el-container class="history-record">
      <h3 class="notice-title">历史消息</h3>
      <el-header height="auto" style="padding: 0;">
        <div class="base-info">
          <el-editable
            :data="baseInfo"
            height="73"
            :columns="baseHistoryColumn"
          >
          </el-editable>
        </div>
      </el-header>
      <div class="gutter-bar"></div>
      <div class="search-box">
        <el-form>
          <el-form-item label="日期范围：">
            <el-date-picker
              v-model="timeRange"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>

            <span class="btns">
              <el-button type="primary" @click="search" icon="el-icon-search"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset"
                >重置</el-button
              >
            </span>
          </el-form-item>
        </el-form>
      </div>
      <main>
        <el-editable
          v-loading="tableLoading"
          :data="tableData"
          height="auto"
          :columns="historyTableColumn"
        >
          <template slot="default-operation" slot-scope="scope">
            <el-button size="small" type="text" @click="viewHistory(scope)"
              >历史消息</el-button
            >
            <el-button size="small" type="text" @click="edit(scope)"
              >编辑</el-button
            >
            <el-button size="small" type="text" @click="enableOrDisable(scope)"
              >停用</el-button
            >
          </template>
        </el-editable>
        <!--  分页 -->
        <el-pagination
          align="right"
          style="margin-top:10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
        />
      </main>
    </el-container>
  </div>
</template>

<script>
import {baseHistoryColumn, historyTableColumn} from './const'
import {
  McSmsTemplateNewGetById,
  McSmsLogNewPpageList
} from '@const/api_messageCenter'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common'
import ElEditable from '@components/el-editable/door/index.vue'
export default {
  name: 'historyRecord',
  components: {
    ElEditable
  },
  data() {
    return {
      PAGINATION_LAYOUT,
      PAGE_NUMBER,
      page: 1,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      tableLoading: false,
      tableData: [],
      baseInfo: [],
      timeRange: '',
      noticeId: '',
      baseHistoryColumn,
      historyTableColumn
    }
  },
  created() {
    this.noticeId = this.$route.query.noticeId
  },
  mounted() {
    this.getBaseInfo()
    this.getTableData()
  },
  methods: {
    reset() {
      this.timeRange = null
      this.search()
    },
    search() {
      this.page = 1
      this.getTableData()
    },
    // 编辑时查询详情 回显数据
    getBaseInfo() {
      this.$axios({
        url: McSmsTemplateNewGetById,
        method: 'get',
        params: {
          id: this.noticeId
        }
      }).then(res => {
        if (res.data.code === '0') {
          let payload = res.data.payload
          this.baseInfo = payload ? [].concat(payload) : []
        }
      })
    },
    //获取列表数据
    getTableData() {
      this.tableLoading = true
      this.$axios({
        url: McSmsLogNewPpageList,
        method: 'POST',
        data: {
          startSendTime: this.timeRange ? this.timeRange[0] : '',
          endSendTime: this.timeRange ? this.timeRange[1] : '',
          messageTemplateId: this.noticeId,
          page: this.page,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          let payload = res.data.payload
          this.tableData = payload && payload.content ? payload.content : []
          this.totalElements =
            payload && payload.totalElements ? payload.totalElements : 0
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 分页条数变化
    handleSizeChange(size) {
      this.pageSize = size
      this.getTableData()
    },
    // 切换页码
    handleCurrentChange(page) {
      this.page = page
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="less">
.gutter-bar {
  height: 16px;
  background: #f0f2f5;
}

.history-record {
  padding: 0 !important;
  height: 100%;
  .notice-title {
    font-size: 16px;
    color: #26344c;
    padding: 16px;
    border-bottom: 1px solid #eef0f5;
  }
  .base-info {
    padding: 16px;
    border-bottom: 1px solid #eceef3;
    .el-table {
      border-bottom: none;
    }
  }
  .search-box {
    padding: 16px 16px 6px 16px;
    .btns {
      margin-left: 20px;
    }
  }
  main {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px 16px;
  }
}
</style>
